<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./demo.css">
    <title></title>
</head>
<body>
       <div class="accordion">
           <input type="checkbox" id="collapse1" hidden>
           <input type="checkbox" id="collapse2" hidden>
           <input type="checkbox" id="collapse3" hidden>
           <!-- div的替代品,html5 语义化标签 SEO比较重要 -->
           <article>
            <lable for="collapse1">列表1</lable>
            <p>内容1</p>
            <p>内容2</p>
            <p>内容3</p>
            <p>内容4</p>
           </article>
           <article>
            <lable for="collapse2">列表2</lable>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
           </article>
           <article>
          <lable for="collapse3">列表3</lable>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
           </article>
       </div>
</body>
</html>